<template>
<!--  <div style="margin-bottom: 100px">-->
<!--    <div style="margin: 10px 0;border-radius: 10px;overflow: hidden">-->
<!--      <el-carousel height="450px" :interval="5000">-->
<!--        <el-carousel-item v-for="item in imgs" :key="item">-->
<!--          <img :src="item" style="width: 100%;">-->
<!--        </el-carousel-item>-->
<!--      </el-carousel>-->
<!--    </div>-->
  <!--    搜索区域-->
  <div style="margin: 10px">
    <el-input v-model="search" placeholder="请输入要搜索的菜品名称" style="width: 20%" clearable/>
    <el-select v-model="search_type" class="m-2" style="margin-left: 10px" @change="searchType" clearable placeholder="按菜品类型查找">
      <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.name"
          :value="item.id"
      />
    </el-select>
    <el-button type="primary" style="margin-left: 5px" @click="pageList">搜索</el-button>


    <div style="margin: 10px 0">
      <el-row :gutter="5">
        <el-col :span="6" v-for="item in tableData" :key="item.id" style="margin-bottom: 5px">
          <div style="position: relative;border: 1px solid #ccc;padding-bottom: 10px;border-radius: 10px;overflow: hidden;height: 100%">
            <img :src="item.img" style="width: 100%;cursor: pointer;height: 130px" @click="$router.push('/front/detail?id='+item.id)">
            <div style="color: #666;padding: 5px;font-size: 18px;height: 35px; cursor: pointer" @click="$router.push('/front/detail?id='+item.id)"><b>{{item.name}}</b></div>
            <div style="color: #666;padding: 5px;font-size: 14px;height: 45px;overflow: hidden">{{item.description}}</div>
            <div style="color: orangered;padding: 5px 5px 5px 50px;font-size: 14px;height: 25px"><span style="right:10px;bottom:10px;"><b>月销:{{item.sale}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;价格:¥ {{item.price}}</b></span></div>
            <div class="item1" style="margin-top: 10px;padding-left: 120px">
              <el-button style="background-color: red;color: white" @click="addCard(item.id)"><el-icon><shopping-cart /></el-icon>加入购物车</el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!--    分页插件-->
    <div style="margin: 10px">
      <el-pagination
          :currentPage="currentPage"
          :page-size="pageSize"
          :page-sizes="[5, 9]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import {ShoppingCart} from "@element-plus/icons";
export default {
  name: "Home",
  components: {
    ShoppingCart
  },
  created() {
    this.pageList()
    this.getOrderType()
  },
  data() {
    return {
      search_type:'',
      search:'',
      total:0,
      currentPage:1,
      pageSize:8,
      tableData:[],
      type:'',
      options: [],
      user: sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {},
      form: {num: 1},
    }
  },
  methods:{
    //添加购物车
    addCard(id) {
      if(!this.user.name){
        this.$message.warning("请登录后进行操作!")
        return
      }else{
        this.form.foodId=id
        this.form.userId=this.user.id
        request.post("/order/cart/save",this.form).then(res => {
          if(res.code == 200){
            this.$message.success("添加成功");
          }else{
            this.$message.error("添加失败!");
          }
        })
      }
    },
    //获得菜品的种类
    getOrderType() {
      request.get("order/type/getOrderType").then(res =>{
        this.selectType = res.data
        this.options = res.data
      });
    },
    //按状态查询
    searchType(val) {
      request.get("order/food/searchType", {
        params: {
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          type: val
        }
      }).then(res =>{
        this.type=val
        this.tableData = res.data
      })
    },
    pageList(){
      request.get("order/food/q_pageList", {
        params: {
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          name: this.search,
          type: this.type
        }
      }).then(res =>{
        this.tableData = res.data.list
        this.total = res.data.total
      })
    },
    handleSizeChange(pageSize){
      this.pageSize=pageSize;
      this.pageList()
    },
    handleCurrentChange(currentPage){
      this.currentPage=currentPage;
      this.pageList()
    },
  }
}
</script>

<style scoped>

</style>